<template>

    <el-scrollbar style="height: 90%;" height="100%" v-if="commentList.length != 0" v-loading="loading">
        <div v-for="item in commentList" :key="item.messageId" class="comment">
            <div class="user">
                <div><img :src="item.imageUrl" alt=""></div>
                <div class="text">
                    <div class="name">
                        <div>{{ item.userName + '' }} </div>
                        <!-- 删除评论 -->
                        <el-button @click="deletecomment(item.id,false)" type="danger" v-show="store.user.id == +item.userId" :icon="Delete" size="small"
                            circle />
                    </div>
                    <div class="time">{{ time(new Date(item.createdAt)) }}</div>
                    <div class="fs res" @click="reply(item.userName, item.id)">{{ item.content }}</div>
                    <span @click="getChildComment(item.id)" class="isChild" v-if="!item.isChild">点击查看全部条回复
                        ></span>
                </div>
            </div>
        </div>
    </el-scrollbar>
    <div v-else style="height: 90%;">
        没有评论，快评论占个座吧！
    </div>
    <!-- 全部回复 -->
    <Transition name="fade">
        <div class="all" v-show="showChild">
            <div style="width: 100%; height: 60%;" @click="showChild = false"></div>
            <Transition name="fadeChild">
                <el-scrollbar v-show="showChild" class="content" height="100%">
                    <div v-for=" item in ChildCommentList" class="comment" :key="item.id">
                        <div class="user">
                            <div><img :src="item.imageUrl" alt=""></div>
                            <div class="text">
                                <div class="name">
                                    <div>{{ item.userName + '' }} </div>
                                    <!-- 删除评论 -->
                                    <el-button @click="deletecomment(item.id)" type="danger" v-show="store.user.id == +item.userId" :icon="Delete"
                                        size="small" circle />
                                </div>
                                <div class="time">{{ time(new Date(item.createdAt)) }}</div>
                                <div class="fs res" @click.stop="reply(item.userName, item.id)">{{ item.content }}</div>
                                <div class="reply">
                                    <span>@{{ item.replyUserName }}:</span>{{ item.replyContent }}
                                </div>
                            </div>
                        </div>
                    </div>
                </el-scrollbar>
            </Transition>
        </div>
    </Transition>
    <div class="input">
        <el-input v-model="input" :placeholder="placeholder" clearable />
        <el-button style="margin-left: 1vw;" type="primary" @click="sendReply">发送</el-button>
        <el-button style="margin-left: 0.2vw;" @click="cancelReply" v-show="replyBool">取消回复</el-button>
    </div>



</template>

<script lang="ts" setup>
/**
 * 评论组件
 */
import { ref, watchEffect, reactive } from "vue"
import { parentComment, childComment, sendComment,deleteComment } from '@/request/api'
import type { Datum, childDatum } from '@/type/news'
import {time} from '@/hooks/index'
import { ElMessage } from 'element-plus'
import { useStore } from '@/stores/counter'
import {
    Delete,
} from '@element-plus/icons-vue'
const store = useStore()
let loading = ref<boolean>(false)
interface sendComment {
    content: string;
    messageId: number;
    parentCommentId?: number;
}
const data = defineProps<{
    id: number
}>()
//父评论列表
let commentList = reactive<Datum[]>([])
//获取到父评论,网络请求
const requestCommentList = (id: number) => {
    return parentComment<number>(id).then(res => {

        commentList.length = 0
        if (res.data)
            commentList.push(...res.data)
        loading.value = false
        return Promise.resolve('获取成功')
    },err=>{

        
    })
}


watchEffect(() => {
    showChild.value=false
    if(data.id==-1) return
    requestCommentList(data.id)
},{
    flush:"post",
})

let showChild = ref<boolean>(false)       //回复评论层开关
let fatherCommentId = ref<number>(0)
//获取到全部回复
let ChildCommentList = reactive<childDatum[]>([])
//获取全部回复评论
const requestChildComment = (id: number) => {
    return childComment<number>(id).then(res => {
        ChildCommentList.length = 0
        ChildCommentList.push(...res.data)
        loading.value = false
        return Promise.resolve('获取成功')
    })
}
//点击全部评论后触发逻辑
const getChildComment = (id: number) => {
    showChild.value = true
    fatherCommentId.value = id
    requestChildComment(id)
}



//发送评论逻辑
let input = ref<string>('')
let placeholder = ref<string>('快开始你的评论吧')
let sendId = ref<number>(0)              //发送回复评论携带的回复人id
let replyBool = ref<boolean>(false)         //取消回复按钮的显示隐藏
//点击评论开始回复
const reply = (name: string, id: number) => {
    sendId.value = id
    placeholder.value = "@ " + name
    replyBool.value = true
}
//发送回复
const sendReply = () => {
    loading.value = true
    sendComment<sendComment>({
        content: input.value,
        messageId: data.id,
        parentCommentId: replyBool.value ? sendId.value : 0
    }).then(res => {
        input.value = ''
        //根据不同的回复，重新调用不同层级的接口
        freshComment(replyBool.value && showChild.value,'评论成功')
    })

}

//刷新评论
const freshComment=(booleans:boolean,text:string)=>{
    if (booleans)
            requestChildComment(fatherCommentId.value).then(res => {
                ElMessage({
                    showClose: true,
                    message: `${text}`,
                    type: 'success',
                })
            })
        else {
            requestCommentList(data.id).then(res => {
                ElMessage({
                    showClose: true,
                    message: `${text}`,
                    type: 'success',
                })
            })
        }
}


//取消回复
const cancelReply = () => {
    replyBool.value = false
    placeholder.value = '快开始你的评论吧'
}


//删除评论
const deletecomment=(id:number,mark:boolean=false)=>{
    loading.value = true
    deleteComment<number>(id).then(res=>{

        
        //mark用于标记及是否为第一层
        freshComment(mark,'删除成功')
    })
}
</script>

<style lang=less  scoped>
.all {
    height: 90%;
    position: absolute;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.356);
    bottom: 10%;
    display: flex;
    justify-content: center;
    overflow: hidden;

    .content {
        width: 99.8%;
        height: 50%;
        padding: 1vw;
        box-sizing: border-box;
        background-color: #fff;
        position: absolute;
        bottom: 0px;
        padding-bottom: 0px;

        border-radius: 1vw 1vw 0px 0px;
    }
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.fadeChild-enter-active,
.fadeChild-leave-active {

    transition: all 1s ease;

}

.fadeChild-enter-from,
.fadeChild-leave-to {
    transform: translateY(100%);
}

.input {
    height: 10%;
    bottom: 0px;
    .flexAc();
}

.comment {
    .user {
        .text {
            padding-bottom: 1vh;
            border-bottom: 0.7px solid rgba(226, 224, 224, 0.685);
            margin-bottom: 2.5vh;
            flex: 1;
        }

        .reply {
            margin-top: 0.2vh;
            margin-bottom: 0.3vh;
            padding-left: 0.2vw;
            border-left: 2px solid #BBBBBB;
            font-size: 0.6vw;
            color: #CACACA;

            span {
                color: #A9A9DD;
            }
        }

        display: flex;

        .res {
            cursor: pointer;
        }

        .fs {
            font-size: 0.8vw;
        }

        .name {
            .fs();
            color: #9C9C9C;
            display: flex;
            justify-content: space-between;
        }

        .isChild::after {
            content: ' ';
            display: block;
            height: 1px;
            background-color: #9473FF;
            transition: all 0.3s ease-in-out;
            transform: scale(0);
            transform-origin: left;

        }

        .isChild:hover::after {
            transform: scale(1);
        }

        .isChild {
            font-size: 0.5vw;
            color: #9473FF;
            margin-top: .8vh;
            .textNOLine();
            display: inline-block;
            cursor: pointer;
        }

        .time {
            font-size: 0.5vw;
            color: #9C9C9C;
            margin-top: 0.3vh;
            margin-bottom: 0.7vh;
        }
    }

    img {
        width: 2vw;
        border-radius: 50%;
        aspect-ratio: 1/1;
        margin-right: 1vw;
    }
}
</style>